<template>
  <!-- <div class="main-bg-color header">如您不想启用功能，请将下面设置框设置为空即可。</div> -->
  <a-form :label-col="labelCol" :wrapperCol="wrapperCol">
    <a-card title="服务订单" hoverable>
      <a-form-item label="单次服务">
        <div>单次服务，护士未接单无费用</div>
        <div class="df">
          单次服务，护士已接单未开始服务扣除支付金额
          <a-input-number
            :disabled="disabled"
            size="small"
            v-model:value="oneOrder"
            :min="0"
            :max="100"
            :formatter="(value) => `${value}%`"
            :parser="(value) => value.replace('%', '')"
            style="margin-left: 10px"
          />
          <a-button
            :type="disabled ? 'danger' : 'primary'"
            @click="edit"
            size="small"
            style="margin-left: 20px"
            v-has="{ a: $route, b: 2 }"
            class="d-a-center edit-btn"
            >{{ disabled ? "修改" : "保存" }}</a-button
          >
        </div>
      </a-form-item>
      <!-- <a-form-item label="长期服务">
        <div>长期服务，护士未接单无费用</div>
        <div>
          长期服务，护士已接单未开始服务扣除支付金额
          <a-input-number
            size="small"
            :disabled="disabled1"
            v-model:value="longOrder"
            :min="0"
            :max="100"
            :formatter="(value) => `${value}%`"
            :parser="(value) => value.replace('%', '')"
          />
          <a-button
            :type="disabled1 ? 'danger' : 'primary'"
            @click="edit1"
            size="small"
            style="margin-left: 20px"
            >{{ disabled1 ? "修改" : "保存" }}</a-button
          >
        </div>
      </a-form-item> -->
    </a-card>
    <a-card title="耗材包" hoverable>
      <a-form-item label="护士已接单：">
        <div class="df">
          扣除耗材总金额
          <a-input-number
            :disabled="disabled2"
            size="small"
            v-model:value="consumable"
            :min="0"
            :max="100"
            :formatter="(value) => `${value}%`"
            :parser="(value) => value.replace('%', '')"
            style="margin-left: 10px"
          />
          <a-button
            :type="disabled2 ? 'danger' : 'primary'"
            @click="edit2"
            size="small"
            style="margin-left: 20px"
            v-has="{ a: $route, b: 2 }"
            class="d-a-center edit-btn"
            >{{ disabled2 ? "修改" : "保存" }}</a-button
          >
        </div>
      </a-form-item>
    </a-card>
  </a-form>
  <a-divider></a-divider>
  <!-- <a-card title="耗材订单" hoverable>
    <a-form :label-col="labelCol" :wrapperCol="wrapperCol">
      <a-form-item label="护士未接单"> 无费用 </a-form-item>
      <a-form-item label="护士已接单">
        <div>
          已接单未开始服务扣除支付金额0%
          <a-input-number
            size="small"
            :disabled="disabled2"
            v-model:value="consumeOneOrder"
            :min="0"
            :max="100"
            :formatter="(value) => `${value}%`"
            :parser="(value) => value.replace('%', '')"
          />
          <a-button
            :type="disabled2 ? 'danger' : 'primary'"
            @click="edit2"
            size="small"
            style="margin-left: 20px"
            >{{ disabled2 ? "修改" : "保存" }}</a-button
          >
        </div>
      </a-form-item>
    </a-form>
  </a-card> -->
</template>
<script>
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { createVNode, defineComponent, ref } from "vue";
import { Modal, message } from "ant-design-vue";
import { selectRefundOrderSet, updateRefundOrderSet } from "@/api/order/index";
import {
  selectConsumeOrderSet,
  updateConsumeOrderSet,
} from "@/api/consume/index";
import { useModal } from "@/hooks"

export default {
  setup() {
    const consumable = ref(0);
    const oneOrder = ref(0);
    const longOrder = ref(0);
    const consumeOneOrder = ref(0);
    const disabled = ref(true);
    const disabled1 = ref(true);
    const disabled2 = ref(true);
    const isOpen = ref();
    const edit = () => {
      if (!disabled.value) {
        const {closeModal} = useModal.confirm({
          title: "确定修改单次服务的扣除支付金额吗?",
          icon: createVNode(ExclamationCircleOutlined),
          onOk: async () => {
            console.log(oneOrder.value, longOrder.value, consumable.value);

            let res = await updateRefundOrderSet({
              one: oneOrder.value / 100,
              more: longOrder.value / 100,
              consumable: consumable.value / 100,
            });
            if (res.success) {
              message.success("修改成功");
              disabled.value = true;
              closeModal()

            }
          },
          onCancel() {
            disabled.value = true;
            closeModal()
          },

          class: "test",
        });
      }
      disabled.value = false;
    };
    const edit1 = () => {
      if (!disabled1.value) {
        const {closeModal} = useModal.confirm({
          title: "确定修改长期服务的扣除支付金额吗?",
          icon: createVNode(ExclamationCircleOutlined),
          onOk: async () => {
            let res = await updateRefundOrderSet({
              one: oneOrder.value / 100,
              more: longOrder.value / 100,
              consumable: consumable.value / 100,
            });
            if (res.success) {
              message.success("修改成功");
              disabled1.value = true;
              closeModal()
            }
          },
          onCancel() {
            disabled1.value = true;
            closeModal()
          },

          class: "test",
        });
      }
      disabled1.value = false;
    };
    const edit2 = () => {
      if (!disabled2.value) {
        const {closeModal} = useModal.confirm({
          title: "确定修改耗材订单扣除支付金额吗?",
          icon: createVNode(ExclamationCircleOutlined),
          onOk: async () => {
            let res = await updateRefundOrderSet({
              one: oneOrder.value / 100,
              more: longOrder.value / 100,
              consumable: consumable.value / 100,
            });
            if (res.success) {
              message.success("修改成功");
              disabled2.value = true;
              closeModal()
            }
          },
          onCancel() {
            disabled2.value = true;
            closeModal()

          },

          class: "test",
        });
      }
      disabled2.value = false;
    };
    init();
    async function init() {
      let res = await selectRefundOrderSet();
      if (res.success) {
        oneOrder.value = res.object.one * 100;
        longOrder.value = res.object.more * 100;
        consumable.value = res.object.consumable * 100;
      }
      //   let res1 = await selectConsumeOrderSet();
    }
    return {
      checked: ref(false),
      consumable,
      oneOrder,
      longOrder,
      consumeOneOrder,
      isOpen,
      labelCol: { style: { fontWeight: "bold", fontSize: "18px" } },
      wrapperCol: { offset: 1 },
      edit,
      edit1,
      edit2,
      disabled,
      disabled1,
      disabled2,
    };
  },
};
</script>
<style scoped>
.header {
  padding: 20px;
  margin-bottom: 20px;
}
.list {
  margin-bottom: 20px;
}
.edit-btn {
  font-size: 14px;
}
</style>
